<template>
	<div class="view">
		<img class="w-poster" :src="formatPoster" />
		<div class="w-info-panel">
			<p class="w-name" v-text="data.name"></p>
			<p class="w-info-item">
				<span class="w-info-key">地区：</span>
				<span v-text="data.areaName"></span>
			</p>
			<p class="w-info-item" v-if="data.attribute.hasBoxOffice == 1">
				<span class="w-info-key">票房：</span>
				<span v-text="data.boxOffice > 10000? (data.boxOffice / 10000 + '亿'):(data.boxOffice + '万')"></span>
			</p>
			<p class="w-info-item">
				<span class="w-info-key">类型：</span>
				<span v-text="formatTypes"></span>
			</p>
			<p class="w-info-item">
				<span class="w-info-key">上映日期：</span>
				<span v-text="data.releaseDate"></span>
			</p>
			<p class="w-info-item" v-if="data.attribute.hasDuration == 1">
				<span class="w-info-key">片长：</span>
				<span v-text="data.duration"></span>
				分钟
			</p>
			<p class="w-info-item" v-if="data.attribute.hasEpisodes == 1">
				<span class="w-info-key">集数：</span>
				<span v-text="data.episodes"></span>
				集
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {}
		},
		computed : {
            "formatPoster" : function() {
            		var posterJson = this.data.poster;
				var poster;
				if(posterJson != null && posterJson != '') {
					var posterObj = eval('(' + posterJson + ')');
					poster = posterObj.url + "-works_poster";
				}
				return poster;
            },
            "formatTypes" : function() {
            		var types = this.data.types;
				if(types != null && types != '') {
					return types.join(" ");
				}
				return "";
            }
       },
		methods: {
		}
	}
</script>

<style scoped="scoped">
	.view {
		background: #E6E6E6;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		padding: 10px;
	}
	
	.w-info-panel {
		margin-left: 20px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
	}
	
	.w-info-key {
		font-weight: bold;
		color: #666;
	}
	
	.w-poster {
		display: block;
		width: 150px;
		height: 210px;
	}
	
	.w-name {
		font-size: 25px;
		color: #333;
		margin-bottom: 15px;
		font-weight: bold;
	}
	
	.w-info-item {
		color: #333;
		height: 25px;
		font-size: 14px;
		line-height: 25px;
	}
</style>